<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据应用-数据同步历史</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">
<!--顶部条-->
<div style="padding: 0 7px 15px 7px" class="clearfix">
    <!--搜索输入框组-->
    <div class="input-group pull-left" style="width: 50%">
        <input id="keyword" class="form-control" type="search" placeholder="描述">
        <div class="input-group-append">
            <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
        </div>
    </div>
    <div class="btn-group" style="margin-left: 4px">
        <button type="button" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-list-ul"></i> 批量 <span class="caret"></span>
        </button>
        <div class="dropdown-menu" role="menu">
            <a id="batch-remove" class="dropdown-item" href="javascript:void(0);">
                <i class="fa fa-times"></i> 批量删除
            </a>
        </div>
    </div>
    <!--新增按钮-->
    <button id="truncate" class="btn btn-danger pull-right" style="margin-left: 5px"><i class="fa fa-trash-o"></i> 清空同步任务</button>
    <button id="add" class="btn btn-info pull-right"><i class="fa fa-plus"></i> 新建同步任务</button>
</div>
<!--数据展示-->
<div class="container-fluid">
    <table id="table" class="table table-sm table-hover table-bordered">
        <thead><tr>
            <th>
                <div class="icheck-primary d-inline">
                    <input id="all" type="checkbox">
                    <label for="all">全选</label>
                </div>
            </th>
            <th>来源数据源</th>
            <th>目标数据源</th>
            <th>描述</th>
            <th style="width: 5em">状态</th>
            <th style="width: 11em;">开始时间</th>
            <th style="width: 11em;">结束时间</th>
            <th style="width: 6em">责任人</th>
            <th style="width: 12em">操作</th>
        </tr></thead>
        <tbody><tr>
            <td>
                <div class="icheck-primary d-inline">
                    <input id="{{id}}" type="checkbox" data-id="{{id}}">
                    <label for="{{id}}">{{index}}</label>
                </div>
            </td>
            <td title="{{dataSourceFromUrl}}"><i style="display: none" class="text-info fa fa-commenting-o"></i> {{dataSourceFromName}}</td>
            <td title="{{dataSourceFromUrl}}"><i style="display: none" class="text-info fa fa-commenting-o"></i> {{dataSourceToName}}</td>
            <td>{{name}}</td>
            <td><span class="badge {{statusClass}}">{{status}}</span></td>
            <td>{{startDate}}</td>
            <td>{{completeDate}}</td>
            <td>{{owner}}</td>
            <td>
                <button class="btn btn-xs btn-outline-primary detail" data-id="{{id}}">
                    <i class="fa fa-info-circle"></i> 详情
                </button>
                <button class="btn btn-xs btn-outline-danger remove" data-id="{{id}}">
                    <i class="fa fa-times"></i> 删除
                </button>
                <button class="btn btn-xs btn-outline-info redo" data-id="{{id}}">
                    <i class="fa fa-refresh"></i> 重做
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--加载更多-->
<div id="load-more" class="text-sm-center text-primary" style="display: none;">
    <span style="cursor: pointer"><i class="fa fa-hand-o-right"></i> 点击加载更多数据</span>
</div>
<!--正在加载-->
<div id="loading" class="text-sm-center text-gray" style="display: none;">
    <span><i class="fa fa-refresh fa-spin"></i> 正在加载...</span>
</div>
<!--全部加载-->
<div id="load-all" class="text-sm-center text-success" style="display: none;">
    <i class="fa fa-info-circle"></i> 已加载全部数据
</div>
<!--加载失败-->
<div id="load-error" class="text-sm-center text-danger" style="display: none;">
    <i class="fa fa-exclamation-triangle"></i> 加载失败
</div>
<!--详情-->
<div id="detail" class="side-panel right width400 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <input type="hidden" id="id" name="id">
        <div class="form-group">
            <label for="dataSourceFromId" class="require">来源数据源</label>
            <div class="select2-info">
                <select class="select2" data-dropdown-css-class="select2-info" data-placeholder="请选择来源数据源"
                        id="dataSourceFromId" name="dataSourceFromId" style="width: 100%;" required></select>
            </div>
        </div>
        <div class="form-group">
            <label for="dataSourceToId" class="require">目标数据源</label>
            <div class="select2-info">
                <select class="select2" data-dropdown-css-class="select2-info" data-placeholder="请选择目标数据源"
                        id="dataSourceToId" name="dataSourceToId" style="width: 100%;" required></select>
            </div>
        </div>
        <div class="form-group">
            <label for="name" class="require">描述</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="请输入描述信息" required>
        </div>
        <div class="form-group">
            <label for="ownerId" class="require">责任人</label>
            <div class="select2-info">
                <select class="select2" data-dropdown-css-class="select2-info" data-placeholder="请选择责任人"
                        id="ownerId" name="ownerId" style="width: 100%;" required></select>
            </div>
        </div>
        <div class="bg-white">
            <button id="ok" class="btn btn-info"><i class="fa fa-check"></i> 确定</button>
            <button id="cancel" class="btn btn-default"><i class="fa fa-times"></i> 取消</button>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var select2DataSourceFromCtrl = new Select2Ctrl("#dataSourceFromId", Url.dataService.dataSourcePage, "id", "name", "select2");
    select2DataSourceFromCtrl.init();

    var selselect2DataSourceToCtrl = new Select2Ctrl("#dataSourceToId", Url.dataService.dataSourcePage, "id", "name", "select2");
    selselect2DataSourceToCtrl.init();

    var select2OwnerCtrl = new Select2Ctrl("#ownerId", Url.baseService.userPage, "id", "userName", "select2");
    select2OwnerCtrl.init();

    var tableCtrl = new TableCtrl(
        Url.dataService.dataTransporterHistorySearchByKeyword,
        Url.dataService.dataTransporterHistoryDetail,
        Url.dataService.dataTransporterHistoryCreate,
        Url.dataService.dataTransporterHistoryModify,
        Url.dataService.dataTransporterHistoryRemove,
        function (template, record, index) {
            var statusClass = "bg-warning";
            switch (record.status) {
                case "LOADING": statusClass = "bg-warning"; break;
                case "EXCEPTION": statusClass = "bg-danger"; break;
                case "RUNNING": statusClass = "bg-info"; break;
                case "REMOVING": statusClass = "bg-danger"; break;
                case "SUCCESS": statusClass = "bg-success"; break;
                case "FAILED": statusClass = "bg-danger"; break;
                default: statusClass = "bg-warning"; break;
            }
            var startDate = Utils.isEmpty(record.startDate) ? "" : record.startDate;
            var completeDate = Utils.isEmpty(record.completeDate) ? "" : record.completeDate;
            return template
                .replace(new RegExp("{{index}}", "gm"), index + 1)
                .replace(new RegExp("{{id}}", "gm"), record.id)
                .replace(new RegExp("{{dataSourceFromName}}", "gm"), record.dataSourceFrom.name)
                .replace(new RegExp("{{dataSourceToName}}", "gm"), record.dataSourceTo.name)
                .replace(new RegExp("{{dataSourceFromUrl}}", "gm"), record.dataSourceFrom.url)
                .replace(new RegExp("{{dataSourceToUrl}}", "gm"), record.dataSourceTo.url)
                .replace(new RegExp("{{name}}", "gm"), record.name)
                .replace(new RegExp("{{statusClass}}", "gm"), statusClass)
                .replace(new RegExp("{{status}}", "gm"), record.statusValue)
                .replace(new RegExp("{{owner}}", "gm"), record.owner ? record.owner.userName : "")
                .replace(new RegExp("{{startDate}}", "gm"), startDate)
                .replace(new RegExp("{{completeDate}}", "gm"), completeDate)

        },
        function () {
            var record = {};
            record.id = $("#id").val();
            record.name = $("#name").val();
            record.dataSourceFromId = $("#dataSourceFromId").val();
            record.dataSourceToId = $("#dataSourceToId").val();
            record.ownerId = $("#ownerId").val();
            return record;
        }
    );
    tableCtrl.redo = function(id) {
        this.showCreate();
        var record = this.getById(id);
        $("#dataSourceFromId").val(record.dataSourceFromId).trigger("change");
        $("#dataSourceToId").val(record.dataSourceToId).trigger("change");
        $("#ownerId").val(record.ownerId).trigger("change");
        $("#name").val(record.name);
    };
    tableCtrl.extraShowCreate = function() {
        $("#ownerId").val(parent.window.frameCtrl.authCtrl.session.id).trigger("change");
    };
    tableCtrl.extraBind = function () {
        var self = this;
        // 绑定详情
        $("#table").on("click", ".detail", function () {
            var id = $(this).attr("data-id");
            var record = self.getById(id);
            var url = "cloud/html/data-transporter-history-table.html?id=" + encodeURIComponent(id) +
                "&dsIdFrom=" + encodeURIComponent(record.dataSourceFrom.id) +
                "&dsIdTo=" + encodeURIComponent(record.dataSourceTo.id) +
                "&dsNameFrom=" + encodeURIComponent(record.dataSourceFrom.name) +
                "&dsNameTo=" + encodeURIComponent(record.dataSourceTo.name) +
                "&dsTypeNameFrom=" + encodeURIComponent(record.dataSourceFrom.type) +
                "&dsTypeNameTo=" + encodeURIComponent(record.dataSourceTo.type) +
                "&dsTypeValueFrom=" + encodeURIComponent(record.dataSourceFrom.typeValue) +
                "&dsTypeValueTo=" + encodeURIComponent(record.dataSourceTo.typeValue) +
                "&dsUrlFrom=" + encodeURIComponent(record.dataSourceFrom.url) +
                "&dsUrlTo=" + encodeURIComponent(record.dataSourceTo.url);
            var uuid = Math.random().toString(36).slice(-8);
            parent.window.frameCtrl.windowCtrl.open(uuid, "数据同步明细", url);
        });
        // 绑定重做
        $("#table").on("click", ".redo", function () {
            var id = $(this).attr("data-id");
            self.redo(id);
        });
        // 绑定清空同步任务
        $("#truncate").click(function () {
            $.ajax({
                url: Url.dataService.dataTransporterHistoryTruncate,
                type: HttpMethod.delete,
                success: function (result, status, xhr) {
                    self.pageNumber = 0;
                    self.records = [];
                    self.setRecords();
                    self.setLoadAll();
                    parent.window.frameCtrl.toastr.success("清空成功！");
                }
            });
        });
    };

    tableCtrl.getTemplate();
    tableCtrl.getRecords();
    tableCtrl.bindEvent();

    var listener = function (event) {
        if (event.type === "DATA_TRANSPORTER_RUNNING" ||
            event.type === "DATA_TRANSPORTER_REMOVING" ||
            event.type === "DATA_TRANSPORTER_SUCCESS" ||
            event.type === "DATA_TRANSPORTER_ERROR") {
            tableCtrl.refreshById(event.data);
        }
    };
    listener.owner = window.location.href;
    parent.window.frameCtrl.websockerCtrl.eventListener.push(listener);
</script>

</body>
</html>